<template>
    <el-row>
        <el-col :span="24" class="col">
            <el-button type="primary" @click="xinzeng">新增公益中心</el-button>
        </el-col>

        <el-col :span="24" class="col">
            <el-table :data="knowledgeList" border style="width: 100%">
                <el-table-column prop="id" label="ID" align="center" label-class-name="header" />
                <el-table-column prop="title" label="标题" align="center" label-class-name="header" />
                <el-table-column prop="intro" label="简介" align="center" label-class-name="header" />
                <el-table-column prop="listImage" label="列表图" align="center" label-class-name="header">
                    <template #default="scope">
                        <el-image style="width: 100px; height: 100px" :src="scope.row.listImage" :fit="fit" />
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center" label-class-name="header" />
                <el-table-column label="操作" align="center" label-class-name="header">
                    <template #default="item">
                        <el-button type="text" @click="edite(item.row)">编辑</el-button>
                        <el-button type="text" @click="del(item.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>

        <el-dialog v-model="show" :title="title" width="800" destroy-on-close="true">
            <EditeKnowledge :form="form" v-if="title == '编辑公益中心'" />
            <XinZengKnowledge v-if="title == '新增公益中心'" />
        </el-dialog>
    </el-row>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import EditeKnowledge from './components/publicWelfare/EditeArea.vue';
import XinZengKnowledge from './components/publicWelfare/XinZeng.vue';

let res = null;

// 定义公益中心列表数据
let knowledgeList = ref([]);
let show = ref(false);
let title = ref("");
let form = ref({});

const edite = (data) => {
    show.value = true;
    title.value = "编辑公益中心";
    form.value = data;
};

const xinzeng = () => {
    show.value = true;
    title.value = "新增公益中心";
};

const del = async (item) => {
    // 根据实际接口更新删除逻辑
    await axios.get("/api/publicWelfare/del?id=" + item.id);
    fetchKnowledgeList();
};

// 获取心理知识列表数据
const fetchKnowledgeList = async () => {
    res = await axios.get("/api/publicWelfare/findAll");
    knowledgeList.value = res.data.data;
};

// 组件首次挂载时获取数据
onMounted(fetchKnowledgeList);
</script>

<style lang="less" scoped>
.col {
    margin: 10px 0;
}

/deep/.header {
    background-color: #1890ff !important;
    color: white;
}
</style>
